<!-- 保证金明细 -->
<template>
	<view class="container">
		<!-- 流水列表 -->
		<view v-if="flowList.length>0">
			<view class="flow-list">
				<view v-for="item in flowList" :key="item.id">
					<view>
						<view>{{ item.remark}}</view>
						<view>{{ item.createTime }}</view>
					</view>
					<view>
						<view :class="item.amount > 0 ? 'reduce' : ' add'">
							{{ item.amount > 0 ? `+${item.amount/100}` : item.amount/100 }}
						</view>
					</view>
				</view>
			</view>
			<!-- 加载 -->
			<uni-load-more :status="hasFlag ? 'loading' : 'noMore'"></uni-load-more>
		</view>
		<view class="empit" v-else>
		</view>
	</view>
</template>
<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import xpPicker from '@/components/xp-picker/xp-picker'
	import unit from '../../libs/newUnit.js'
	import {
		getToExceedTheTime,
		getUserInfo
	} from '../../libs/unit.js'
	import moment from 'moment'
	moment.locale('zh-cn');
	export default {
		components: {
			uniLoadMore,
			xpPicker
		},
		data() {
			return {
				hasFlag: true, // 是否还有更多数据要加载
				amount: 5000, //
				userInfo: {
					user: {},
					params: {}
				}, //当前用户信息
				flowList: [], //资金流水
				flowObj: { //(type 0 资金 50 诚信值)
					type: 0,
					findDate: '',
					pageNum: 0,
					pageSize: 10,
				},
				isRecharge: false,
				nowDateY: moment(new Date().getTime()).format('YYYY'),
				nowDateM: moment(new Date().getTime()).format('MM'),
			}
		},
		onLoad() {
			this.flowObj.findDate = this.nowDateY + '-' + this.nowDateM
			this.refresh()
		},
		methods: {
			async confirm(e) {
				this.nowDateY = e.value.split("-")[0]
				this.nowDateM = e.value.split("-")[1]
				this.flowObj.findDate = e.value
				this.flowObj.pageNum = 0
				this.flowList = []
				this.hasFlag = true
				this.my_flow()
			},
			// 获取资金流水
			async my_flow() {
				if (!this.hasFlag) return // 说明已经没有更多啦

				++this.flowObj.pageNum
				let res = await this.$fetch(this.$api.my_flow, this.flowObj, 'POST')
				// console.log('获取资金流水', res)
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				uni.stopPullDownRefresh()
				// 拼接
				// 
				this.flowList = [...this.flowList, ...res.rows, ]
				this.hasFlag = this.flowList.length < res.total
			},
			// 刷新
			refresh() {
				this.flowList = []
				this.hasFlag = true
				this.flowObj.pageNum = 0
				this.flowObj.pageSize = 10
				this.my_flow()
				this.getUserInfo()
				console.log(this.userInfo.amount)
			},
			async getUserInfo() {
				let res = await this.$fetch(this.$api.get_current_user, {}, 'GET')
				if (res.code) return;
				this.userInfo = res.data
			},
		},
		onReachBottom() {
			this.my_flow()
		},
		onPullDownRefresh() {
			this.refresh()
		},
	}
</script>
<style lang="less">
	.container {
		background-color: rgba(241, 241, 245, 1);

		.flow-list {
			margin-top: 20rpx;
			height: 100%;
			background: #fff;
			padding-bottom: 1rpx;

			&>view {
				height: 148rpx;
				width: 690rpx;
				padding-left: 28rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #F1F1F5;

				&>view:nth-child(1) {
					&>view:nth-child(1) {
						margin: 28rpx 0 12rpx;
						color: rgba(26, 26, 26, 1);
						font-weight: bold;
						line-height: 40rpx;
					}

					&>view:nth-child(2) {
						margin-bottom: 12rpx;
						line-height: 40rpx;
						color: rgba(127, 127, 127, 1)
					}
				}

				&>view:last-child {
					align-self: center;

					&>.add {
						font-weight: bold;
						font-size: 36rpx;
						color: rgba(254, 69, 56, 1);
					}

					&>.reduce {
						font-weight: bold;
						font-size: 36rpx;
						color: rgba(78, 153, 0, 1);
					}
				}
			}
		}

		.empit {
			width: 414rpx;
			height: 280rpx;
			background: url('../../static/icon3/grow/empit.png') center center/cover no-repeat;
			margin: 496rpx auto;
		}
	}
</style>